<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/normal.css"/>
		<link rel="stylesheet" type="text/css" href="css/global.css"/>
		<link rel="stylesheet" type="text/css" href="css/home.css"/>
		<script src="js/js.main.js"></script>
		<script src="js/js.normal.js"></script>
	</head>
	<body>
		<div id="wrapper">
			<header>
				<!--the logo of page-->
				<div class="logo float_left">
					<a href="home.html"><img src="../images/logo.png"/></a>
				</div>
				<!--navigation of page-->
				<nav>
					<ul>
						<!--use sprite image and pseudo elements-->
						<li data-tooltip = 'Comic'><a href="home.html"></a></li>
						<li data-tooltip = 'Movie'><a href="home.html"></a></li>
						<li data-tooltip = 'Video'><a href="home.html"></a></li>
						<li data-tooltip = 'Game'><a href="home.html"></a></li>
						<li data-tooltip = 'Tv'><a href="home.html"></a></li>
						<li data-tooltip = 'More'><a href="home.html"></a></li>
					</ul>
				</nav>
				<!--user account : login or create new account-->
				<ul id="account" class="account float_right">
					<li><img src="../images/p1.png"/></li>
					<li id="login"><a href="">Bug Warm</a></li>
					<li></li>
				</ul>
			</header>
			<!--主体部分-->
			<div class="mainInfo_wrap">
				<!--轮播部分-->
				<div id="slider" class="slider">
					<ul class="list-image">
						<li><img src="../images/banner.jpg"/></li>
						<li><img src="../images/banner1.jpg"/></li>
						<li><img src="../images/banner2.jpg"/></li>
					</ul>
					<ul class="list-dot">
						<li class="oo"></li>
						<li class="ii"></li>
						<li class="zz"></li>
					</ul>
					<input class="play-now" type="button" name="" id="play_movie" value="Watch Now" />
					<div class="info-movie">
						<ul class="info-basic">
							<li>published <span class="warning">FEB 20,2015</span></li>
							<li>updated <span class="warning">FEB 20,2015</span></li>
							<li>rating <span><img src="../images/rating1.png"/></span></li>
						</ul>
						<ul class="info-welcome">
							<li data-star = '250'><i></i><p>250</p></li>
							<li data-talk = '215'><i></i><p>216</p></li>
							<li data-download = '520'><i></i><p>520</p></li>
						</ul>
					</div>
				</div>
				<!--详细部分-->
				<div class="content">
					<div class="top">
						<h2>featurd movies</h2>
						<div class="search">
							<i></i>
							<form action=""><input type="search" placeholder="search..." name="" id="search" value="" /></form>
						</div>
					</div>
					<div class="movie-list">
						<ul>
							<li class="margin-rb">
								<div class="section margin-b">
									<img src="../images/pic1.jpg"/>
									<div class="info-basic" data-movieName = 'Guardians of the Galaxy'>
										<p class=""><i></i>3666</p>
										<input class="download" type="button" name="download" id="download" value="" />
									</div>	
								</div>
								<div class="section">
									<img src="../images/pic1.jpg"/>
									<div class="info-basic" data-movieName = 'Guardians of the Galaxy'>
										<p class=""><i></i>3666</p>
										<input class="download" type="button" name="download" id="download" value="" />
									</div>	
								</div>
							</li>
							<li class="margin-rb">
								<div class="info-detailed padding-b">
									<p><i class="star"></i>2533</p>
									<p><i class="talk"></i>1314</p>
									<p><i class="download"></i>5230</p>
									<p>Rating : <span class="rating"></span></p>
									<p>Release Date : <span class="update-time"></span></p>
								</div>
								<img src='../images/pic3.jpg'/>
							</li>
							<li class="wide"><img src="../images/pic4.jpg"/></li>
						</ul>
						<ul>
							<li class="margin-rb">
								<div class="section">
									<img src="../images/pic1.jpg"/>
									<div class="info-basic" data-movieName = 'Guardians of the Galaxy'>
										<p class=""><i></i>3666</p>
										<input class="download" type="button" name="download" id="download" value="" />
									</div>
								</div>
							</li>
							<li class="margin-rb">
								<div class="section">
									<img src="../images/pic1.jpg"/>
									<div class="info-basic" data-movieName = 'Guardians of the Galaxy'>
										<p class=""><i></i>3666</p>
										<input class="download" type="button" name="download" id="download" value="" />
									</div>
								</div>
							</li>
							<li class="wide iframe  margin-rb">
								<iframe src="index-home.html" width="380px" height="100%" style="border:1px solid #FFFFFF"></iframe>
							</li>
							<li class="margin-r">
								<div class="info-detailed">
									<p><i class="star"></i>2533</p>
									<p><i class="talk"></i>1314</p>
									<p><i class="download"></i>5230</p>
									<p>Rating : <span class="rating"></span></p>
									<p>Release Date : <span class="update-time"></span></p>
								</div>
							</li>
							<li>
								<img src='../images/pic8.jpg'/>
							</li>
						</ul>
						<ul>
							<li class="margin-b">
								<div class="section">
									<img src="../images/pic1.jpg"/>
									<div class="info-basic" data-movieName = 'Guardians of the Galaxy'>
										<p class=""><i></i>3666</p>
										<input class="download" type="button" name="download" id="download" value="" />
									</div>
								</div>
							</li>
							<li>
								<div class="info-detailed padding-b">
									<p><i class="star"></i>2533</p>
									<p><i class="talk"></i>1314</p>
									<p><i class="download"></i>5230</p>
									<p>Rating : <span class="rating"></span></p>
									<p>Release Date : <span class="update-time"></span></p>
								</div>
								<img src='../images/pic10.jpg'/>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<footer>
				<div class="footer-decoration">
					<div class = 'decoration'></div>
				</div>
				<div id="footer_info">
					<div id="store_info" class="float_left">
						<img src="images/f_logo.png"/>
						<p>It is a long established fact that a reader will be distracted 
							by the readable content of a page.There are many variations of
							passages of Lorem Ipsum available, but the majority have suffered.</p>
					</div>
					<ul id="store_list" >
						<li>
							<h3>Categories</h3>
							<a href="">Dance</a>
							<a href="">History</a>
							<a href="">War</a>
						</li>
						<li>
							<h3>information</h3>
							<a href="">New products</a>
							<a href="">Top sellers</a>
							<a href="">Specials</a>
						</li>
						<li>
							<h3>Follow Us</h3>
							<a href="">Facebook</a>
							<a href="">Twitter</a>
							<a href="">Youtube</a>
							<p>@ 2017 Template by <span><a class="warning" href="">HuyaEr</a></span></p>
						</li>
					</ul>
				</div>
			</footer>
		</div>
	</body>
</html>
